<template>
	<div class="search_list_wrapper">
		<div class="form">
			<el-input placeholder="请输入内容" v-model="searchValue" @keypress.enter.native="handleSearch">
				<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
			</el-input>
		</div>
		<el-tabs v-model="activeName">
			<el-tab-pane label="文章数据" name="article"><search-article :columns="columnData"></search-article></el-tab-pane>
			<el-tab-pane label="书籍数据" name="book"><search-book :columns="columnData"></search-book></el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import searchBook from './book';
import searchArticle from './article';
import { getSiteNav } from '@/api/web/sysWebColumn';
export default {
	components: { searchArticle, searchBook },
	data() {
		return {
			searchValue: '',
			activeName: 'article',
			columnData: []
		};
	},
	computed: {
		searchWord() {
			return this.$route.query.keyword || '';
		}
	},
	async created() {
		this.searchValue = this.searchWord;
		await this.getColumnSourceData();
	},
	methods: {
		handleSearch() {
			const num = Math.random() * 1000000;
			this.$router.replace({
				path: '/search',
				query: { keyword: this.$wipeSpace(this.searchValue, 'all'), index: num }
			});
		},
		//获取源数据
		async getColumnSourceData() {
			let result = await getSiteNav().then((res) => res.data);
			if (result.code === '0') {
				this.columnData = !result.data ? [] : [...this.$treeToFlat(result.data)];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.search_list_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 0 64px;

	.form ::v-deep {
		width: 620px;
		margin: 0 auto;
		flex-shrink: 0;

		.el-input-group__append {
			padding: 0 19px;
			background-color: #357c65;
		}

		.el-input__inner:focus {
			border-color: #357c65;
		}

		.el-button {
			font-size: 20px;
			padding: 10px;
			color: #fff;
		}
	}
	.el-tabs--top ::v-deep {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-top: 30px;
		.el-tabs__header {
			flex-shrink: 0;
			margin-bottom: 0;
		}
		.el-tabs__active-bar {
			background-color: #357c65;
		}
		.el-tabs__item {
			font-size: 16px;
			height: 56px;
			line-height: 56px;
			&.is-active {
				color: #357c65;
				font-weight: bold;
			}
		}
		.el-tabs__item.is-active,
		.el-tabs__item:hover {
			color: #357c65;
		}
		.el-tabs__content {
			flex: 1;
		}
		.el-tab-pane {
			height: 100%;
		}
	}
}
</style>
